<template>
	<view>
		<view class="Form">
			<u-field v-model="form.oldPass" trim password :clearable="false" label="旧密码" placeholder="请输入旧密码" class="uinput" />
			<u-field v-model="form.newPass" trim password :clearable="false" label="新密码" placeholder="请输入新密码" class="uinput" />
			<u-field v-model="form.newPass2" trim password :clearable="false" label="新密码" placeholder="请再次确认新密码" class="uinput" />
		</view>
		<view class="submitBtn">
			<u-button @click='submit' type="warning" throttleTime="500" hoverStayTime="100" :custom-style="submitBtnStyle" shape="circle"
			 :ripple="true">修改</u-button>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		isEmpty
	} from '@/utils/common.js'
	import {
		encrypt
	} from '@/utils/encrypt.js'
	export default {
		data() {
			return {
				form: {
					oldPass: '',
					newPass: '',
					newPass2: ''
				},
				submitBtnStyle: {
					width: '690rpx',
					color: '#FFFFFF',
					height: '80rpx',
					lineHeight: '80rpx',
					overflow: 'hidden',
					letterSpacing: '2rpx',
					fontSize: '34rpx',
					fontWeight: '500',
					backgroundImage: 'linear-gradient(to right, #F7B314, #F5D547)',
					boxShadow: '0 3px 6px 0 rgba(247,179,50,0.33)'
				},
			}
		},
		methods: {
			submit() {
				if (isEmpty(this.form.oldPass)) {
					uni.showToast({
						icon: 'none',
						title: '请输入旧密码',
						duration: 2000
					});
					return;
				} else if (isEmpty(this.form.newPass)) {
					uni.showToast({
						icon: 'none',
						title: '请输入新密码',
						duration: 2000
					});
					return;
				} else if (isEmpty(this.form.newPass2)) {
					uni.showToast({
						icon: 'none',
						title: '请再次确认新密码',
						duration: 2000
					});
					return;
				} else if (this.form.newPass != this.form.newPass2) {
					uni.showToast({
						icon: 'none',
						title: '两次密码输入不一致',
						duration: 2000
					});
					return;
				} else if (this.form.newPass == this.form.oldPass) {
					uni.showToast({
						icon: 'none',
						title: '新旧密码不能一致',
						duration: 2000
					});
					return;
				}
				uni.showLoading();
				let data = {
					...this.form
				}
				delete data.newPass2
				data.oldPass = encrypt(data.oldPass)
				data.newPass = encrypt(data.newPass)
				this.$api.editPassApi(data).then((res) => {
					uni.hideLoading();
					if (res.status == 200) {
						uni.showToast({
							icon: 'none',
							title: '修改成功',
							duration: 2000
						});
						setTimeout(() => {
							this.exitLogin()
						}, 1500)
					} else {
						this.$refs.uToast.show({
							title: res.message
						})
					}
				}).catch((err) => {
					uni.hideLoading();
					uni.showToast({
						icon: 'none',
						title: '修改失败',
						duration: 2000
					});
				})
			},
			exitLogin() {
				this.$api.logoutApi()
				uni.navigateTo({
					url: '/pages/login/index',
					animationType: "zoom-fade-out",
					animationDuration: 100
				})
				this.$store.dispatch("exitLogin")
			}
		}
	}
</script>

<style lang="scss">
	.uinput {
		border-bottom: rgb(230, 230, 230) solid 2rpx;
		font-size: 30rpx;
	}

	.Form {
		border-top: rgb(230, 230, 230) solid 2rpx;
		background-color: #FFFFFF;
	}

	.submitBtn {
		height: 110rpx;
		left: 0;
		right: 0;
		bottom: 0;
		margin: 0;
		position: fixed;
		flex-direction: column;
		z-index: 101;
		background: #FFFFFF;
		padding: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
